<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cloud-DMS 云存储数据管理系统</title>
    <!-- 引入 Layui CSS -->
    <link rel="stylesheet" href="https://unpkg.com/layui@2.7.6/dist/css/layui.css">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            margin: 0;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .header {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 20px 0;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .header h1 {
            color: white;
            margin: 0;
            font-size: 2.5em;
            font-weight: 300;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .header .version {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.1em;
            margin-top: 5px;
        }

        .container {
            max-width: 1200px;
            margin: 50px auto;
            padding: 0 20px;
        }

        .welcome-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 40px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            text-align: center;
            margin-bottom: 30px;
        }

        .welcome-card h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 2em;
        }

        .welcome-card p {
            color: #666;
            font-size: 1.1em;
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .modules-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .module-card {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .module-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        .module-card h3 {
            color: #333;
            margin-bottom: 15px;
            font-size: 1.3em;
            display: flex;
            align-items: center;
        }

        .module-card h3 i {
            margin-right: 10px;
            color: #667eea;
        }

        .module-card p {
            color: #666;
            font-size: 0.95em;
            line-height: 1.5;
            margin: 0;
        }

        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            background: #3888f6;
            color: white;
            border-radius: 12px;
            font-size: 0.8em;
            margin-left: auto;
        }

        .highlighted {
            border: 2px solid #667eea;
            background: rgba(102, 126, 234, 0.05);
        }

        .time-info {
            text-align: center;
            color: rgba(255, 255, 255, 0.8);
            margin-top: 30px;
            font-size: 1.1em;
        }

        .action-buttons {
            text-align: center;
            margin-top: 30px;
        }

        .action-buttons .layui-btn {
            margin: 0 10px;
            font-size: 1.1em;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>Cloud-DMS</h1>
    <div class="version">云存储数据管理系统 v1.0.0</div>
</div>

<div class="container">
    <div class="welcome-card">
        <h2>欢迎使用 Cloud-DMS 系统</h2>
        <p>Cloud-DMS 是一个功能完整的云存储数据管理系统，提供安全的文件存储、管理和共享服务。<br>
            系统采用模块化设计，支持用户认证、权限管理、安全加密、网络传输等核心功能。</p>

        <div class="action-buttons">
            <button class="layui-btn layui-btn-primary" onclick="checkSystemStatus()">
                <i class="layui-icon layui-icon-survey"></i> 系统状态检查
            </button>
            <button class="layui-btn" onclick="window.open('/h2-console', '_blank')">
                <i class="layui-icon layui-icon-console"></i> 数据库控制台
            </button>
            <button class="layui-btn layui-btn-normal" onclick="window.open('/api/status', '_blank')">
                <i class="layui-icon layui-icon-api"></i> API状态
            </button>
        </div>
    </div>

    <div class="modules-grid">
        <div class="module-card">
            <h3>
                <i class="layui-icon layui-icon-username"></i>
                用户认证模块
                <span class="status-badge">开发中</span>
            </h3>
            <p>基于Spring Security + JWT实现用户登录认证，支持安全的用户身份验证和会话管理。</p>
        </div>

        <div class="module-card">
            <h3>
                <i class="layui-icon layui-icon-group"></i>
                权限管理模块
                <span class="status-badge">开发中</span>
            </h3>
            <p>基于角色的权限控制系统，区分普通用户和管理员角色，确保数据访问安全。</p>
        </div>

        <div class="module-card">
            <h3>
                <i class="layui-icon layui-icon-password"></i>
                安全加密模块
                <span class="status-badge">开发中</span>
            </h3>
            <p>使用AES加密算法保护敏感文件，MD5校验文件完整性，确保数据安全。</p>
        </div>

        <div class="module-card">
            <h3>
                <i class="layui-icon layui-icon-transfer"></i>
                网络传输模块
                <span class="status-badge">开发中</span>
            </h3>
            <p>基于Spring Boot实现文件上传下载，支持断点续传，提供稳定的网络传输服务。</p>
        </div>

        <div class="module-card">
            <h3>
                <i class="layui-icon layui-icon-file"></i>
                存储管理模块
                <span class="status-badge">开发中</span>
            </h3>
            <p>基于本地文件系统和JPA实现文件存储管理，按用户ID组织文件目录结构。</p>
        </div>

        <div class="module-card">
            <h3>
                <i class="layui-icon layui-icon-download-circle"></i>
                备份恢复模块
                <span class="status-badge">开发中</span>
            </h3>
            <p>定时自动备份用户文件，支持文件恢复功能，确保数据不丢失。</p>
        </div>

        <div class="module-card">
            <h3>
                <i class="layui-icon layui-icon-time"></i>
                文件生命周期模块
                <span class="status-badge">开发中</span>
            </h3>
            <p>管理文件的完整生命周期，支持软删除和定时清理，优化存储空间。</p>
        </div>

        <div class="module-card">
            <h3>
                <i class="layui-icon layui-icon-refresh"></i>
                数据恢复模块
                <span class="status-badge">开发中</span>
            </h3>
            <p>基于备份数据实现文件恢复功能，支持快速数据恢复操作。</p>
        </div>
    </div>

    <div class="time-info">
        <i class="layui-icon layui-icon-time"></i>
        系统启动时间: <span id="current-time">开发中</span>
    </div>
</div>

<!-- 引入 Layui JS -->
<script src="https://unpkg.com/layui@2.7.6/dist/layui.js"></script>
<script>
    // 初始化Layui
    layui.use(['layer', 'util'], function(){
        var layer = layui.layer;
        var util = layui.util;

        // 更新当前时间
        function updateTime() {
            var now = new Date();
            var timeStr = now.getFullYear() + '-' +
                String(now.getMonth() + 1).padStart(2, '0') + '-' +
                String(now.getDate()).padStart(2, '0') + ' ' +
                String(now.getHours()).padStart(2, '0') + ':' +
                String(now.getMinutes()).padStart(2, '0') + ':' +
                String(now.getSeconds()).padStart(2, '0');
            document.getElementById('current-time').textContent = timeStr;
        }

        // 初始化系统启动时间
        updateTime();

        // 系统状态检查函数
        window.checkSystemStatus = function() {
            layer.load(1, {shade: [0.1,'#fff']});

            fetch('/api/status')
                .then(response => response.json())
                .then(data => {
                    layer.closeAll('loading');

                    var content = '<div style="padding: 20px;">' +
                        '<h3 style="margin-top: 0; color: #333;">系统状态检查结果</h3>' +
                        '<div style="margin-bottom: 15px;"><strong>状态:</strong> <span style="color: #52c41a;">' + data.status + '</span></div>' +
                        '<div style="margin-bottom: 15px;"><strong>消息:</strong> ' + data.message + '</div>' +
                        '<div style="margin-bottom: 15px;"><strong>版本:</strong> ' + data.version + '</div>' +
                        '<div style="margin-bottom: 15px;"><strong>检查时间:</strong> ' + data.timestamp + '</div>' +
                        '<h4 style="color: #333; margin-bottom: 10px;">模块状态:</h4>' +
                        '<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 14px;">';

                    var modules = data.modules;
                    var moduleNames = {
                        'userAuth': '用户认证模块',
                        'permissionMgmt': '权限管理模块',
                        'securityEncrypt': '安全加密模块',
                        'networkTransfer': '网络传输模块',
                        'storageMgmt': '存储管理模块',
                        'backupRecover': '备份恢复模块',
                        'lifecycleMgmt': '文件生命周期模块',
                        'dataRecover': '数据恢复模块'
                    };

                    for (var key in modules) {
                        var status = modules[key] ? '<span style="color: #52c41a;">N 正常</span>' : '<span style="color: #ff4d4f;">X 异常</span>';
                        content += '<div>' + moduleNames[key] + ': ' + status + '</div>';
                    }

                    content += '</div></div>';

                    layer.open({
                        type: 1,
                        title: '系统状态',
                        content: content,
                        area: ['500px', '400px'],
                        btn: ['确定'],
                        btnAlign: 'c'
                    });
                })
                .catch(error => {
                    layer.closeAll('loading');
                    layer.msg('系统状态检查失败: ' + error.message, {icon: 2});
                });
        };

        // 页面加载完成提示
        layer.msg('Cloud-DMS 系统初始化完成！', {icon: 1, time: 2000});
    });
</script>
</body>
</html>